<template>
<div class="ace-container" style="height:100%">
    <!-- 官方文档中使用 id，这里禁止使用，在后期打包后容易出现问题，使用 ref 或者 DOM 就行 -->
    <div class="ace-editor" ref="ace" style="max-height:100%;height:100%"></div>

</div>
</template>

<script>
import ace from "ace-builds";
import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
import "ace-builds/src-noconflict/theme-xcode"; // 默认设置的主题
import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式
import beautify from "ace-builds/src-noconflict/ext-beautify"; // 默认设置的语言模式

export default {
    watch: {
        value(newval, oldval) {
            if (newval != oldval) {
              console.log(this.aceEditor)
                 this.aceEditor.getSession().doc.setValue(this.value)
            }
        }
    },
    mounted() {

        this.init();
        // this.aceEditor = ace.edit(this.$refs.ace, {
        //   maxLines: 46, // 最大行数，超过会自动出现滚动条
        //   minLines: 10, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
        //   fontSize: 14, // 编辑器内字体大小
        //   theme: this.themePath, // 默认设置的主题
        //   mode: this.modePath, // 默认设置的语言模式
        //   tabSize: 4, // 制表符设置为 4 个空格大小
        // wrap:true,
        //   value: this.value ? this.value : "",
        // });
        // 激活自动提示

    },
    props: ["value"],
    data() {
        return {
            aceEditor: null,
            themePath: "ace/theme/xcode", // 不导入 webpack-resolver，该模块路径会报错
            modePath: "ace/mode/json", // 同上
        };
    },
    methods: {
        init() {
            this.aceEditor = ace.edit(this.$refs.ace, {
                maxLines: 46, // 最大行数，超过会自动出现滚动条
                minLines: 10, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
                fontSize: 14, // 编辑器内字体大小
                theme: this.themePath, // 默认设置的主题
                mode: this.modePath, // 默认设置的语言模式
                tabSize: 4, // 制表符设置为 4 个空格大小
                wrap: true,
                value: this.value ? this.value : "",
            });
            
            this.aceEditor.setOptions({
                enableSnippets: true,
                enableLiveAutocompletion: true,
                enableBasicAutocompletion: true,
            });
            this.aceEditor.getSession().on("change", this.change);
            console.log(beautify)
            beautify.beautify(this.aceEditor.getSession());
        },
        change() {
            this.$emit("input", this.aceEditor.getSession().getValue());
        },
    },
};
</script>

<style scoped>
</style>
